<template>
    <div class="root">
      <!-- 导航栏 -->
      <el-header class="nav">
        <div class="nav__container">
          <div class="nav__content">
            <div class="nav__left">
              <div class="nav__logo">LearnPro</div>
              <el-menu mode="horizontal" :ellipsis="false" class="nav__menu">
                <RouterLink to="/"><el-menu-item index="1">首页</el-menu-item></RouterLink>
                <RouterLink to="/honor"><el-menu-item index="2">荣誉</el-menu-item></RouterLink>
                <RouterLink to="/study"><el-menu-item index="3">学习之路</el-menu-item></RouterLink>
                <RouterLink to="/about"><el-menu-item index="4">关于我们</el-menu-item></RouterLink>
              </el-menu>
            </div>
            <div class="nav__right">
              <el-input
                v-model="searchText"
                placeholder="搜索课程"
                class="search-input"
                :prefix-icon="Search"
              />
              <RouterLink to="/login">
                <el-button type="primary" class="nav-button">登录</el-button>
              </RouterLink>
              <RouterLink to="/register/student">
                <el-button type="success" class="nav-button">注册</el-button>
              </RouterLink>
            </div>
          </div>
        </div>
      </el-header>
  
      <div class="page">
        <!-- Hero Section -->
        <div class="hero">
          <div class="hero__image-wrapper">
            <img
              src="https://ai-public.mastergo.com/ai/img_res/9eed2d2b322289f4da959618c8a06a57.jpg"
              class="hero__image"
              alt="hero background"
              onerror="this.src='https://via.placeholder.com/1920x400?text=Image+Not+Available'"
            />
          </div>
          <div class="hero__overlay">
            <div class="container">
              <div class="hero__content">
                <h1 class="hero__title">开启你的软件测试之旅</h1>
                <p class="hero__description">
                  从入门精进，跟随我们的测试技术学习路线，循序渐进的课程设置，帮助你快速成长为专业的测试工程师
                </p>
                <button class="hero__button">开始学习</button>
              </div>
            </div>
          </div>
        </div>
  
        <!-- Course Categories -->
        <div class="container section">
          <!-- Entry Level -->
          <div class="course-section">
            <h2 class="section__title">
              <el-icon class="section__icon section__icon--green"><Stamp /></el-icon>
              入门级
            </h2>
            <div class="course-grid">
              <div
                v-for="(course, index) in entryCourses"
                :key="index"
                class="course-card"
              >
                <div class="course-card__content">
                  <el-icon :class="['course-card__icon', course.iconClass]">
                    <component :is="course.icon" />
                  </el-icon>
                  <div>
                    <h3 class="course-card__title">{{ course.title }}</h3>
                    <p class="course-card__description">{{ course.description }}</p>
                    <div class="course-card__meta">
                      <span class="course-card__tag">{{ course.difficulty }}</span>
                      <span class="course-card__tag">{{ course.duration }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
  
          <!-- Intermediate Level -->
          <div class="course-section">
            <h2 class="section__title">
              <el-icon class="section__icon section__icon--blue"><Connection /></el-icon>
              中级
            </h2>
            <div class="course-grid">
              <div
                v-for="(course, index) in intermediateCourses"
                :key="index"
                class="course-card"
              >
                <div class="course-card__content">
                  <el-icon :class="['course-card__icon', course.iconClass]">
                    <component :is="course.icon" />
                  </el-icon>
                  <div>
                    <h3 class="course-card__title">{{ course.title }}</h3>
                    <p class="course-card__description">{{ course.description }}</p>
                    <div class="course-card__meta">
                      <span class="course-card__tag">{{ course.difficulty }}</span>
                      <span class="course-card__tag">{{ course.duration }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
  
          <!-- Advanced Level -->
          <div class="course-section">
            <h2 class="section__title">
              <el-icon class="section__icon section__icon--purple"><Star /></el-icon>
              高级
            </h2>
            <div class="course-grid">
              <div
                v-for="(course, index) in advancedCourses"
                :key="index"
                class="course-card"
              >
                <div class="course-card__content">
                  <el-icon :class="['course-card__icon', course.iconClass]">
                    <component :is="course.icon" />
                  </el-icon>
                  <div>
                    <h3 class="course-card__title">{{ course.title }}</h3>
                    <p class="course-card__description">{{ course.description }}</p>
                    <div class="course-card__meta">
                      <span class="course-card__tag">{{ course.difficulty }}</span>
                      <span class="course-card__tag">{{ course.duration }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
  
      <!-- 页脚 -->
      <el-footer class="custom-footer">
        <div class="footer-container">
          <el-row class="footer-row" :gutter="40">
            <el-col :xs="24" :sm="12" :md="6" class="footer-col">
              <h3 class="footer-title">关于我们</h3>
              <p class="footer-text">
                我们专注于提供高质量的在线教育服务，帮助学员实现他们的职业理想。我们的课程由行业专家设计，旨在提供最实用的技能和知识。
              </p>
            </el-col>
            <el-col :xs="24" :sm="12" :md="6" class="footer-col">
              <h3 class="footer-title">联系方式</h3>
              <p class="footer-text">电话：+86 123 4567 8901</p>
              <p class="footer-text">邮箱：contact@learnpro.com</p>
              <p class="footer-text">地址：中国北京市朝阳区</p>
            </el-col>
            <el-col :xs="24" :sm="12" :md="6" class="footer-col">
              <h3 class="footer-title">服务条款</h3>
              <ul class="footer-links">
                <li><el-link type="info" href="#" class="footer-link">隐私政策</el-link></li>
                <li><el-link type="info" href="#" class="footer-link">用户协议</el-link></li>
                <li><el-link type="info" href="#" class="footer-link">退款政策</el-link></li>
              </ul>
            </el-col>
            <el-col :xs="24" :sm="12" :md="6" class="footer-col">
              <h3 class="footer-title">关注我们</h3>
              <div class="footer-social">
                <el-link type="info" href="#" class="footer-social-link">
                  <i class="fab fa-weixin footer-social-icon"></i>
                </el-link>
                <el-link type="info" href="#" class="footer-social-link">
                  <i class="fab fa-weibo footer-social-icon"></i>
                </el-link>
                <el-link type="info" href="#" class="footer-social-link">
                  <i class="fab fa-linkedin footer-social-icon"></i>
                </el-link>
              </div>
            </el-col>
          </el-row>
          <div class="footer-copyright">
            <p class="footer-copyright-text">&copy; 2024 LearnPro. All rights reserved.</p>
          </div>
        </div>
      </el-footer>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue';
  import { Search } from '@element-plus/icons-vue';
  const searchText = ref('');
  import {
    Connection,
    Stamp,
    Star,
    Monitor,
    Cpu,
    Link,
    Platform,
    Setting,
    Histogram,
  } from '@element-plus/icons-vue';
  
  const entryCourses = ref([
    {
      icon: 'Monitor',
      iconClass: 'course-card__icon--green',
      title: '软件测试基础',
      description: '掌握软件测试基础概念，测试方法，功能测试设计与执行流程',
      difficulty: '入门级',
      duration: '40 课时',
    },
    {
      icon: 'Link',
      iconClass: 'course-card__icon--blue',
      title: 'HTTP 协议基础',
      description: '深入理解 HTTP 协议基础知识，为接口测试打下基础',
      difficulty: '入门级',
      duration: '20 课时',
    },
  ]);
  
  const intermediateCourses = ref([
    {
      icon: 'Platform',
      iconClass: 'course-card__icon--indigo',
      title: 'Python 测试开发',
      description: '学习 Python 测试框架，实现自动化测试脚本开发',
      difficulty: '中级',
      duration: '60 课时',
    },
    {
      icon: 'Setting',
      iconClass: 'course-card__icon--orange',
      title: 'Web 自动化测试',
      description: '掌握 Selenium 等工具，完成 Web 自动化测试项目',
      difficulty: '中级',
      duration: '50 课时',
    },
  ]);
  
  const advancedCourses = ref([
    {
      icon: 'Cpu',
      iconClass: 'course-card__icon--purple',
      title: '性能测试',
      description: '掌握 JMeter 等性能测试工具的使用及性能优化方案',
      difficulty: '高级',
      duration: '45 课时',
    },
    {
      icon: 'Histogram',
      iconClass: 'course-card__icon--red',
      title: '安全测试',
      description: '学习 LoadRunner 等工具进行深入的安全测试实践',
      difficulty: '高级',
      duration: '40 课时',
    },
  ]);
  </script>
  
  <style scoped>
  .root {
    min-height: 100vh;
    background-color: #fff;
  }
  
  /* 导航栏样式 */
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 0;
  }
  
  .nav__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
  }
  
  .nav__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 4rem;
  }
  
  .nav__left {
    display: flex;
    align-items: center;
  }
  
  .nav__logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #2563eb;
    margin-right: 2.5rem;
  }
  
  .nav__menu {
    border-bottom: none;
  }
  
  .nav__right {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  
  .search-input {
    width: 200px;
    border-radius: 20px !important;
    border: 1px solid #e5e7eb;
    background-color: #f9fafb;
    padding: 0.5rem 1rem;
  }
  
  .nav-button {
    border-radius: 20px !important;
    padding: 0.5rem 1.5rem !important;
  }
  
  /* 页面主体样式 */
  .page {
    min-height: 100vh;
    background-color: #f9fafb;
    padding-top: 4rem;
  }
  
  .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
  }
  
  /* Hero 区域样式 */
  .hero {
    position: relative;
    height: 400px;
    overflow: hidden;
    margin-bottom: 4rem;
  }
  
  .hero__image-wrapper {
    position: absolute;
    inset: 0;
  }
  
  .hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }
  
  .hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(37, 99, 235, 0.9), transparent);
  }
  
  .hero__content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 32rem;
    color: white;
    padding: 2rem;
  }
  
  .hero__title {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    animation: fadeIn 1s ease;
  }
  
  .hero__description {
    font-size: 1.125rem;
    margin-bottom: 2rem;
    animation: fadeIn 1.2s ease;
  }
  
  .hero__button {
    display: inline-block;
    background-color: #4f46e5;
    color: white;
    padding: 0.75rem 2rem;
    font-size: 1.125rem;
    font-weight: 500;
    transition: background-color 0.2s;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    animation: fadeIn 1.4s ease;
  }
  
  .hero__button:hover {
    background-color: #4338ca;
  }
  
  /* 课程区域样式 */
  .section {
    padding: 4rem 0;
  }
  
  .course-section {
    margin-bottom: 4rem;
  }
  
  .course-section:last-child {
    margin-bottom: 0;
  }
  
  .section__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
  }
  
  .section__icon {
    font-size: 1.875rem;
  }
  
  .section__icon--green {
    color: #22c55e;
  }
  
  .section__icon--blue {
    color: #3b82f6;
  }
  
  .section__icon--purple {
    color: #a855f7;
  }
  
  .course-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .course-card {
    background-color: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  }
  
  .course-card__content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .course-card__icon {
    font-size: 1.75rem;
    margin-top: 0.25rem;
  }
  
  .course-card__icon--green {
    color: #22c55e;
  }
  
  .course-card__icon--blue {
    color: #3b82f6;
  }
  
  .course-card__icon--indigo {
    color: #6366f1;
  }
  
  .course-card__icon--orange {
    color: #f97316;
  }
  
  .course-card__icon--purple {
    color: #a855f7;
  }
  
  .course-card__icon--red {
    color: #ef4444;
  }
  
  .course-card__title {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #1e3a8a;
  }
  
  .course-card__description {
    color: #4b5563;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    line-height: 1.5;
  }
  
  .course-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .course-card__tag {
    background-color: #f3f4f6;
    color: #6b7280;
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
  }
  
  /* 页脚样式 */
  .custom-footer {
    --el-footer-padding: 0 !important;
    background-color: #2d3748 !important;
    border-top: 3px solid rgba(255, 255, 255, 0.1);
    margin-top: 80px;
  }
  
  .footer-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 60px 20px 30px;
    background-color: #2d3748 !important;
  }
  
  .footer-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #e2e8f0;
    position: relative;
    padding-bottom: 0.75rem;
  }
  
  .footer-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: #4299e1;
  }
  
  .footer-text {
    color: #cbd5e0;
    font-size: 0.875rem;
    line-height: 1.75;
    margin-bottom: 0.75rem;
  }
  
  .footer-link {
    color: #cbd5e0;
    font-size: 0.875rem;
    transition: color 0.3s ease;
  }
  
  .footer-link:hover {
    color: #4299e1;
  }
  
  .footer-social {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  
  .footer-social-icon {
    font-size: 1.5rem;
    color: #cbd5e0;
    transition: all 0.3s ease;
  }
  
  .footer-social-icon:hover {
    color: #4299e1;
    transform: scale(1.1);
  }
  
  .footer-copyright {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid #4a5568;
  }
  
  .footer-copyright-text {
    color: #718096;
    font-size: 0.875rem;
    text-align: center;
  }
  
  /* 动画效果 */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  </style>